<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>${blog.blogName}</title>
    <c:import url="/WEB-INF/jsp/frontend/activity/script.jsp" />
    <c:import url="/WEB-INF/jsp/frontend/head.jsp" />
    <link rel="stylesheet" href="<spring:url value="/css/blogList.css?v=1.1"/>" />
    <link rel="stylesheet" href="<spring:url value="/css/readBlog.css?v=1.1"/>" />
</head>
<body style="background:none" id="body">

<c:import url="/WEB-INF/jsp/frontend/header.jsp" />
<%--<nav class="navbar">--%>
    <%--<div class="nav-container">--%>
        <%--<div class="nav-logo-container">--%>
            <%--<a class="nav-logo" href="#" >EDU Chain</a>--%>
        <%--</div>--%>

        <%--<div class="nav-search-container">--%>
            <%--<img class="nav-search-icon" src="<spring:url value="/images/search.png"/>"/>--%>
        <%--</div>--%>


        <%--<div class="nav-menu-container">--%>
            <%--<img class="nav-menu" src="<spring:url value="/images/menu2.png"/>"/>--%>
        <%--</div>--%>

        <%--<div class="nav-user-container">--%>
            <%--<img class="nav-drop" src="<spring:url value="/images/login.png"/>"/>--%>
            <%--<a class="nav-login" href="#">Log In</a>--%>
        <%--</div>--%>
    <%--</div>--%>
<%--</nav>--%>

<div class="passages">

    <div class="passage-name-container">
        <a href="#" class="passage-name">${blog.blogName}</a>
    </div>

    <div class="passage-userinfo-container">
        <div class="user-image" id="user_img" style="cursor: pointer" onclick="window.location.href = '<spring:url value='/personalCenter/index/${blog.blogPub}' />'"></div>
        <div class="user-name-time">${blog.userName}·${blog.blogCreateTime}</div>
    </div>

    <div class="passage-main-container">
        ${blogContent.blogContentText}
    </div>



    <div class="passage-comment">
        <div class="like-container">
            <img class="like-icon like" src="<spring:url value="/images/like.png"/>"/>
            <img class="like-icon liked" style="display: none ; width: 18px" src="<spring:url value="/images/liked.png"/>"/>
            <p class="like-number">${blog.blogLikeNum}</p>
        </div>
        <div class="like-container praise">
            <a href="<spring:url value="/reward"/>?blogId=${blog.blogId}">
            打赏
            </a>
        </div>
        <script>
                var clickTime = 1;

                if(${isLiked} === true){
                    clickTime = 0;
                    jQuery(".like").hide();
                    jQuery(".liked").show();
                }

                jQuery(".like-container").click(function () {
                    if(clickTime == 1){
                        jQuery.post("addLike", {
                            pid: '${blog.blogId}'}, function (res) {
                            if (res === "true") {
                                jQuery(".like-number").text(parseInt(jQuery(".like-number").text()) + 1);
                                clickTime--;
                                jQuery(".like").hide();
                                jQuery(".liked").show();
                            }
                        });
                    }
                    if(clickTime == 0){
                        jQuery(".liked").hide();
                        jQuery(".like").show();
                        jQuery.post("subtractLike", {
                            pid: '${blog.blogId}'}, function (res) {
                            if (res === "true") {
                                jQuery(".like-number").text(parseInt(jQuery(".like-number").text()) - 1);
                                clickTime++;
                            }
                        });
                    }
                });

        </script>


        <div class="collect-share">
            <img class="collect-icon" src="<spring:url value="/images/share.png"/>"/>
            <p>收藏</p>
        </div>
        <div class="collect-share">
            <img class="share-icon" src="<spring:url value="/images/share.png"/>"/>
            <p>分享</p>
        </div>
    </div>

    <div class="passage-reply">
        <div class="reply-num">
            <b id="reply-num-word">${page.totalRecord}条评论</b>
            <div id="line">
            </div>
        </div>

        <div class="reply-container">
            <c:forEach var="classify" items="${page.list}" varStatus="s">

                <div class="reply-block">
                <div class="user-image reply_user_img" style="cursor: pointer" onclick="window.location.href = '<spring:url value='/personalCenter/index/${classify.userId}' />'"></div>
                <div class="reply-content-container">
                    <div class="reply-user-name">${classify.userName}</div>
                    <div class="reply-content">${classify.blogReplyContent}</div>
                    <div class="reply-time-container">
                        <div class="reply-more-container">
                            <a id="open-reply" class="reply-more" onclick="open_reply(this,'${classify.replyId}')">回复(${classify.blogReplyReplyNum})</a>
                            <a id="close-reply" class="reply-more close-reply" onclick="close_reply(this)" style="display: none;" >收起回复</a>
                        </div>
                        <div class="reply-time">2017-06-17 23:30</div>
                    </div>
                    <div class="reply-reply reply" id="reply-reply${classify.replyId}" style="display: none;">
                        <div class="reply-reply-all${classify.replyId} reply-reply-all" >

                        </div>

                        <div class="my-reply">
                            <div class="my-reply-button">
                                <a id="open-my-reply" onclick="open_reply(this)"><p>我也说一句</p></a>
                                <a id="close-my-reply" style="display: none;" onclick="close_reply(this)"><p>收起此回复</p></a>
                            </div>
                        </div>
                        <div class="my-reply-container" id="my-reply${classify.replyId}" style="display: none">
                            <div contenteditable="true" class="my-reply-content" id="my-reply-content${classify.replyId}"></div>
                            <button class="my-reply-commit" onclick="submitReply('${classify.replyId}')">发 表</button>
                        </div>



                    </div>

                </div>

                </div>

            </c:forEach>
        </div>

        <script>


            function replyCheck(thisBlock) {
                if(thisBlock.html() == "</br>" ||  thisBlock.html() == null || thisBlock.html() == "") {
                    alert("发帖内容不能为空！");
                    thisBlock.focus();
                    return false;
                }
            }
            
            function submitReply(locationId) {
                jQuery.post("submitInFloorReply", {
                    pid: '${blog.blogId}',
                    locationId : locationId,
                    content : jQuery("#my-reply-content" + locationId).text()
                }, function (response) {
                    jQuery(".reply-reply-all" + locationId).html(response);
                    jQuery("#my-reply-content" + locationId).text("");
                });
            }

            function open_reply(obj,id) {
                    var dex = jQuery(obj);
                    <%--jQuery.post("getReply", {--%>
                        <%--pid: ${blog.blogId},--%>
                        <%--locationId : id--%>
                    <%--}, function (response) {--%>
                        <%--jQuery(".reply-reply-all" + id).html(response);--%>
                    <%--});--%>

                    jQuery(obj).hide();
                    jQuery(obj).next().show();
                    jQuery.ajax({
                        type:"POST",
                        url:"getReply",
                        data: {pid: '${blog.blogId}' , locationId: id},
                        beforeSend:function(){
                            jQuery(".reply-reply-all" + id).html('<img style="margin: 2px auto" src="<spring:url value="/images/loading.gif"/>"  />');
                        },
                        success:function(data){
                            jQuery(".reply-reply-all" + id).html(data);
                        },

                    })

                    jQuery(obj).parent().parent().next().animate({height:"toggle"},300);
            }

                function close_reply(obj) {
                    jQuery(obj).parent().parent().next().animate({height:"toggle"},300,function () {
                        $(obj).hide();
                        $(obj).prev().show();
                    });
                }


                function open_reply_reply(obj) {
                    $(obj).parent().parent().parent().parent().next().find("#open-my-reply").click();
                };

        </script>

        <div style="height: 400px;float: left" >

        </div>

        <div class="page-split">
            <ul>


                <c:if test="${page.totalRecord>0}">
                    <li class="page-last">
                        <a href="<spring:url value='/readBlog?pid=${blog.blogId}&p=1'/>">首页</a>
                    </li>
                </c:if>


                <c:if test="${page.currentPage>1}">
                    <li class="page-next">
                        <div class="page-next-container">
                            <a href="<spring:url value='/readBlog?pid=${blog.blogId}&p=${page.currentPage-1}'/>">< 上一页</a>
                        </div>
                    </li>
                </c:if>

                <c:forEach var="t" begin="1" end="${page.totalPage}">
                    <c:choose>
                        <c:when test="${page.currentPage == t}">
                            <li class="page-number" style="border: none">
                                <a style="border: none">${t}</a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="page-number">
                                <a href="<spring:url value='/readBlog?pid=${blog.blogId}&p=${t}'/>">${t}</a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>

                <c:if test="${page.currentPage<page.totalPage}">
                    <li class="page-next">
                        <div class="page-next-container">
                            <a href="<spring:url value='/readBlog?pid=${blog.blogId}&p=${page.currentPage+1}'/>">下一页 ></a>
                        </div>
                    </li>
                </c:if>

                <c:if test="${page.currentPage<=page.totalPage}">
                    <li class="page-last">
                        <a href="<spring:url value='/readBlog?pid=${blog.blogId}&p=${page.totalPage}'/>">尾页</a>
                    </li>
                </c:if>
            </ul>

        </div>


        <div class="submit-reply">
            <p>发表回复</p>
        </div>
        <div contenteditable="true" class="my-reply-content" id="reply-input"></div>
        <button type="button" class="btn btn-primary" id="submit-button">发表</button>

        <script>
            jQuery("#submit-button").click(function () {
                replyCheck(jQuery("#reply-input"));
                jQuery.post("addReply", {
                    pid: '${blog.blogId}',
                    content: jQuery("#reply-input").text()}, function (res) {
                    if (res === "true") {
                        location.reload();
                    }
                });
            });
        </script>


        <c:import url="/WEB-INF/jsp/frontend/footer.jsp" />
    </div>
</div>
<script type="text/javascript">
    window.onload = function() {
        //配置
        var config1 = {
            vx: 2,  //小球x轴速度,正为右，负为左
            vy: 2,  //小球y轴速度
            height: 2,  //小球高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 300,      //点个数
            color: "43,43,43",  //点颜色
            stroke: "43,43,43",      //线条颜色
            dist: 8000,    //点吸附距离
            e_dist: 20000,   //鼠标吸附加速距离
            border_radius: 20,
            max_conn: 1   //点到点最大连接数
        };

        var body1 = document.getElementById("body");

        CanvasParticle(config1,body1);

    };
</script>
</body>
</html>
